<template>
  <div
    class="TheWidget"
    :style="style"
    :data-id="config.id"
    :data-top="config.top"
    :data-left="config.left"
    :data-width="config.wdith"
  >
    <div ref="chart" class="chart"></div>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "TheLineChart",
  props: {
    config: {
      type: Object,
      required: true
    },
    dimension: {
      type: Object,
      required: true
    }
  },
  computed: {
    style() {
      return {
        top: this.dimension.top + "px",
        left: this.dimension.left + "px",
        width: this.dimension.width + "px",
        height: this.dimension.height + "px"
      };
    },
    options() {
      return {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
    }
  },
  methods: {
    init() {
      if (this.$refs.chart || !this.chart) {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.options);
      }
    }
  },
  mounted() {
    this.init();
    window.addEventListener("resize", () => {
      if (this.$refs.chart && this.$refs.chart.offsetHeight && this.chart) {
        this.chart.resize();
      }
    });
  }
};
</script>

<style lang="scss">
.TheWidget .chart {
  width: 100%;
  height: 100%;
}
</style>
